<template>
    <div class="albumres">
        <div v-if="info.ablums.length !== 0">
            <div class="count">
                <span>找到{{ info.ablumsCount }}张专辑</span>
            </div>
            <SingerAlbum :albumlist="info.ablums"></SingerAlbum>
            <div class="p">
                <Pagination :total="info.ablumsCount" :page-size="30" :current-page="info.currentPage"
                    @handleCurrentChange="getSearchAlbumBy"></Pagination>
            </div>
        </div>
        <div class="no" v-else>
            <el-empty description="数据正在加载~" :image-size="200"></el-empty>
        </div>
    </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { reactive, onMounted } from 'vue'
import { getSearchAlbum } from '@/api/searchdetail/searchdetail.js'
import SingerAlbum from '../../singerdetail/children/SingerAlbum.vue'
import Pagination from '../../../components/content/Pagination.vue'
const route = useRoute()
const info = reactive({
    keyword: '',
    ablums: [],
    ablumsCount: 0,
    currentPage: 1,
})

//获取专辑数据
async function getSearchAlbumBy(page = 1) {
    info.currentPage = page
    let offset = (page - 1) * 30
    let res = await getSearchAlbum(info.keyword, offset)
    if (res.data.code == 200) {
        info.ablums = res.data.result.albums
        info.ablumsCount = res.data.result.albumCount
    }
}


onMounted(() => {
    info.keyword = route.params.keywords
    getSearchAlbumBy()
})

</script>

<style lang="scss" scoped>
.albumres {
    position: relative;

    .count {
        position: absolute;
        top: 0px;
        right: 60px;
        font-size: 14px;
        color: #c0bebe;
    }

    .no {
        width: 100%;
        text-align: center;
        font-size: 24px;
        font-weight: 700;
    }
}
</style>